<template>
  <div class="hello">
    <div id="echarts" ref="chart" style="height: 500px;width: 600px" />
    <!--    <button @click='remove'>返回长春地图</button>-->
  </div>
</template>

<script>
import * as echarts from 'echarts' // 引入echarts
import ccs from '@/assets/json/city/ccs.json'

export default {
  data() {
    return {
      printViewDialog: false,
      dataValue: null,
      tempAae002: '',
      tempCjt100: '',
      currentDate: '',
      mapData: [
        { name: '吉林省农业科学院', value: [125.375698, 43.820834] },
        { name: '吴中天玺', value: [125.375719, 43.852687] },
        { name: '长春卫生大厦', value: [125.271177, 43.884601] },
        { name: '绿地海域中央墅', value: [125.376384, 43.82054] },
        { name: '北湖科技园', value: [125.397429, 43.98707] },
        { name: '西宸之光', value: [125.176098, 43.855937] }
      ]
    }
  },
  mounted() {
    this.initccs()
  },
  methods: {
    initccs() {
      // 获取图标 初始化
      var myChart = echarts.init(document.getElementById('echarts'))

      // 图标指定数据
      echarts.registerMap(ccs, ccs)

      const option = {
        // 图标标题
        // 鼠标移入显示的内容
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        geo: [
          {
            // 指定图标为地图
            type: 'map',
            // 设置数据
            map: ccs,
            zoom: 1.2, // 改变这个值的大小就可以了
            // 开启缩放
            roam: true,
            // 设置缩放的大小
            scaleLimit: {
              min: 1.2,
              max: 30
            },
            // 自定义名称映射
            label: {
              show: true
            },
            itemStyle: {
              areaColor: '#009ad6'
            }
          }
        ],
        series: [
          {
            /*        type: 'map',
                    // 跟geo关联
                    geoIndex: 0,*/
            name: '在地图中显示散点图',
            type: 'scatter',
            coordinateSystem: 'geo', // 设置坐标系为 geo
            // 设置人口的数据  用于显示在地图上
            data: this.mapData
          }
        ]
      }

      // 把option设置给myChart实例
      myChart.setOption(option, true)
    },
    remove() {
      this.initccs()
    }
  }

}

</script>

<style scoped>
</style>
